<template>
	<div class="thePage flex-column">
		<div class="pg-title60">实习日记管理</div>
		<div class="flex-between">
			<div class="studentName">{{ studentName }}</div>
			<div class="teacherName">教师：{{ teacherName }}</div>
		</div>
		<div class="line"></div>
		<div class="list flex-column overflow-y">
			<div class="item-box flex-column" v-for="(item, i) in listData" :key="i">
				<div class="title-1" @click="onDetail(item)">{{ item.title }}</div>
				<div class="content-read-2" @click="onDetail(item)">{{ item.content }}</div>
				<div class="flex-between">
					<div class="dtUpdate">{{ item.dtUpdate }}</div>
					<div class="operator">
						<i class="iconfont icon-bianji" @click="onEdit(item)"></i>
						<i class="iconfont icon-shanchu1" @click="onDelete(item)"></i>
					</div>
				</div>
			</div>
			<div class="flex-end"><div class="btn-add" @click="onAdd()">+</div></div>
		</div>

		<!-- 弹窗 -->
		<dialog-confirm-cancel
			:visible="visiblePopup"
			content="提交已更改"
			btnConfirmText="确认"
			:onConfirm="handleConfirm"
			btnCancelText="取消"
			:onCancel="handleCancel"
		></dialog-confirm-cancel>
	</div>
</template>

<script>
import DialogConfirmCancel from '@/components/DialogConfirmCancel.vue';

export default {
	name: 'DiaryList',
	components: {
		DialogConfirmCancel
	},
	data() {
		return {
			studentName: '张四四',
			teacherName: '龚琼花',
			listData: [
				{
					title: '专升本',
					content: '第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......',
					dtUpdate: '2020-7-02'
				},
				{
					title: '常忙碌以及充实的非常忙碌',
					content: '第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......',
					dtUpdate: '2020-7-02'
				},
				{
					title: '升本专升本专升本专升本专升本',
					content: '第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......',
					dtUpdate: '2020-7-02'
				},
				{
					title: '专升本',
					content: '第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......',
					dtUpdate: '2020-7-02'
				},
				{
					title: '常忙碌以及充实的非常忙碌',
					content: '第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......',
					dtUpdate: '2020-7-02'
				},
				{
					title: '升本专升本专升本专升本专升本',
					content: '第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......',
					dtUpdate: '2020-7-02'
				}
			],
			visiblePopup: false //提交确认弹窗显示
		};
	},

	methods: {
		onEdit(item) {
			this.$router.push({ name: 'diaryEdit' });
		},

		onDelete(item) {
			console.log('onDelete');
			this.visiblePopup = true;
		},
		handleConfirm() {
			this.$createToast({
				type: 'warn',
				time: 1000,
				txt: '已删除'
			}).show();
			this.visiblePopup = false;
		},
		handleCancel() {
			this.visiblePopup = false;
		},

		onDetail(item) {
			this.$router.push({ name: 'diaryDetail' });
		},

		onAdd() {
			this.$router.push({ name: 'diaryEdit' });
		}
	}
};
</script>

<style lang="less" scoped>
// less多行文本溢出函数，溢出...
.overflow(@line) when (isnumber(@line)){
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line;
  overflow: hidden;
}

.thePage {
	.studentName {
		padding: 20px;
		font-size: 22px;
		font-weight: 500;
		color: #000000;
		line-height: 20px;
	}
	.teacherName {
		padding: 20px;
		font-size: 12px;
		font-weight: 400;
		color: #1b1b1b;
	}
	.list {
		.item-box {
			
			.title-1 {
				font-size: 14px;
				font-weight: bold;
				color: #000000;		
				.overflow(1);				
			}
			.content-read-2 {				
				padding: 10px ;
				height: 32px;
				background: #ffffff;
				border: 1px solid #ffb651;
				border-radius: 10px;
				font-size: 10px;
				color: #b0b0b0;
				line-height: 20px;
				.overflow(2);				
			}

			.operator {
				margin-top: 10px;
				font-size: 14px;
				color: #ffb651;
				line-height: 22px;
				letter-spacing: 5px;
			}
			.dtUpdate {
				color: #b0b0b0;
				font-size: 10px;
			}
		}
	}
	.line {
		margin: 0 10px;
		height: 1px;
		background: #e5e5e5;
	}
}

</style>
